<template>
  <span class="dog">
    <div class="img">
      <img
        :src="obj.dogImgUrl"
        alt=""
      >
    </div>
    <div
      class="msg"
      @click="selectFn(obj.dogName)"
      :style="{background:bgc}"
    >
      <p>{{ obj.dogName }}</p>
    </div>
  </span>
</template>
 
<script>
export default {
  props: ['obj'],
  data() {
    return {
      bgc: ''
    }
  },
  methods: {
    // 子传父
    selectFn(name) {
      this.$emit('selectFn', name)
      this.bgc = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
    }
  }
}
</script>

<style scoped>
.dog {
  display: inline-block;
  width: 300px;

  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #000;
}
img {
  width: 100%;
  height: 190px;
}
.msg {
  text-align: center;
  font-size: 22px;
}
p {
  height: 50px;
  line-height: 50px;
  margin: 0;
}
</style>